

<style scoped>
    .header{
        text-align: center;
    }
    .box{
        padding:30px;
        background-color: #FFF;
    }
    .canter{
        text-align: center;
    }
</style>
<style>
.pt20{
    padding-top:20px;
}
</style>

<template>
    <el-card>
        <div class="box">
            <div class="header">
                <el-radio-group v-model="tabPosition" @change='changeList(tabPosition)' style="margin-bottom: 30px;">
                    <el-radio-button label="browse" >浏览排行Top100</el-radio-button>
                    <el-radio-button label="share">分享排行Top100</el-radio-button>
                    <el-radio-button label="favorate">收藏排行Top100</el-radio-button>
                    <el-radio-button label="expert">关联用户数Top100</el-radio-button>
                    <el-radio-button label="app">关联产品数Top100</el-radio-button>
                </el-radio-group>
            </div>
            <div class="canter">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="manufactureName" label="品牌" ></el-table-column>
                    <el-table-column prop="productName" label="牌号" width="160"></el-table-column>
                    <el-table-column prop="name" label="产品名称" ></el-table-column>
                    <el-table-column prop="num" label="数量" width="120"></el-table-column>
                </el-table>
                <!-- <el-pagination style="margin-top:20px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination> -->
                <!-- <el-pagination
                    layout="prev, pager, next"
                    :page-size="20"
                    background
                    :total="100" class="pt20">
                </el-pagination> -->
            </div>
        </div>
    </el-card>
</template>
<script>
import {RadioGroup,RadioButton,Table,TableColumn,Pagination} from 'element-ui'
    export default {
        data() {
            return {
                tabPosition: 'browse',
                tableData:[],
            }
        },
        components:{
            ElRadioGroup:RadioGroup,
            ElRadioButton:RadioButton,
            ElTable:Table,
            // ElTableColumn:TableColumn,
            ElPagination:Pagination
        },
        created() {
            this.getList();
        },        
        methods:{
            handleSizeChange(){},
            handleCurrentChange(){},
            getList(){
                var url = '/product/statistics/top100/browse';
                API.get(url, {}).then(res => {
                    this.tableData =  res;
                    console.log(this.tableData)
                });
            },
            changeList(item){
                var url = '/product/statistics/top100/'+ item;
                API.get(url, {}).then(res => {
                    this.tableData =  res;
                });
            },
        }

    }
</script>